<template>
	<view class="register">
		<view class="bg-position">
			<image src="../../static/img/bg-register.png" class="bg-img-h280"></image>
		</view>
		<view class="types">
			<view v-for="(item, index) in typeArr" :key="index" class="item" :class="index==typeIndex?'active':''" @click="typeClick(index)">
				<view :class="'iconfont iconfont-'+item.icon"></view>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="inputGroup">
			<!--#ifdef MP-WEIXIN -->
			<text v-show="typeArr[typeIndex].icon=='gasmeter'" class="iconfont iconfont-scan" @click="scan"></text>
			<!--#endif -->
			<input type="number"  :placeholder="getPlaceholder" v-model="useCode" class="b-color-blue"/>
		<!-- 	<text class="hint" v-show="typeArr[typeIndex].isShowQueryMethod" @click="getHint">{{typeArr[typeIndex].queryMethodText}}</text> -->
		</view>
		<view class="relation">
			<view class="title">
				与我关系
			</view>
			<group-tabs :list="userKindArray" :cIndex="cIndex" @active="getActive"></group-tabs>
		</view>
		<view class="next"> 
			<!-- <label class="lable">
				 <checkbox-group @change="isAgreeFun">
					<checkbox color="#1F95EC" style="transform:scale(0.7)" value="1"/>
				</checkbox-group>
				<text>我已阅读并同意</text>
				<text class="blue" @click="showProtocol">《支付协议》</text>
			</label> -->
			<button class="able-button" @click="next">下一步</button>
		</view>
	</view>
</template>

<script>
	let util = require('../../utils/utils.js');
	let api = require('../../utils/api.js');
	
	import groupTabs from '../../components/group-tabs.vue'
	export default {
		components: {
			groupTabs
		},
		data() {
			return {
				cIndex:'1',
				useCode:'',
				typeArr: [],
				typeIndex: 0,//默认选中第一个
				userKind:{},
				userArray:[],
				isAgree:0,
				userKindArray: [],
			}
		},
		watch: {
			
		},
		async onShow(){
			let that = this;
			let config = await util.getStorage("config");
			//获取支持的类型
			that.typeArr = [];
			console.log(config)
			
			let obj = config.data;
			let isHasUserArray = obj.hasOwnProperty('userArray');
			if(isHasUserArray) {
				this.userArray = obj.userArray;	
			}
			
			if(obj.userCodeFlag == '1') {
				that.typeArr.push({
						icon: 'user',
						id:'01',
						name: '用户编号',
						isShowQueryMethod:true,
						queryMethodText:'如何查户号?',
						queryMethodImg: '../../static/img/banner-index.png' // 查户号/表号图片
					})
			}
			if(obj.phoneFlag == '1') {
				that.typeArr.push({
						icon: 'phone',
						id:'03',
						name: '电话号码',
						isShowQueryMethod:false
					})
			}
			if(obj.meterFlag == '1') {
				that.typeArr.push({
						icon: 'gasmeter',
						id:'02',
						name: '表具号码',
						isShowQueryMethod:true, // 是否显示如何查查询方式
						queryMethodText:'如何查表号?',
						queryMethodImg: '../../static/img/banner-index1.png' // 查户号/表号图片
					})
			}
			
			//获取关系
			that.userKindArray = obj.userKindArray;
			that.userKind = obj.userKindArray[0];
			
		},
		onLoad() {
			
		},
		computed: {
			getPlaceholder() {
				let str = '';
				if(this.typeArr.length){
					str = `请输入${this.typeArr[this.typeIndex].name}`;
				}
				return str;
			}
		},
		methods: {
			//查看协议
			showProtocol(){
				util.navigateTo('/pages/index/markdownShow')
			},
			//扫码
			scan(){
				let that = this;
				uni.scanCode({
					success: function (res) {
						that.useCode =  res.result;
					}
				});
			},
			isAgreeFun(e){
				this.isAgree = e.detail.value[0];
			},
			getActive(item){
				this.userKind = item;
				this.cIndex = item.userKindId;
			},
			typeClick(i) { // 选择号码类型
				this.typeIndex = i;
			},
			getHint() {
				util.navigateTo(`hint?hintImg=${this.typeArr[this.typeIndex].queryMethodImg}`)
			},
			valideProtocol(isHasProtocol){
				if(isHasProtocol) {
					console.log(isHasProtocol)
					if(this.isAgree != '0'){
						util.showModal(`请阅读并同意协议`);
						return false;
					}else {
						return true;
					}
				}else {
					return true;
				}
			},
			//isHasProtocol 是否需要同意协议 0、不需要同意协议 1、需要同意协议
			valide(isHasProtocol){
				//验证输入框和同意协议是否勾选，输入框电话号码验证，输入为数字。
				if(this.useCode.trim() == ""){
					util.showModal(`请输入${this.typeArr[this.typeIndex].name}`);
					return false;
				}else if(this.typeArr[this.typeIndex].id == '03'){
					if(!(/^1[3456789]\d{9}$/.test(this.useCode))){ 
						util.showModal(`请输入正确的电话号码`);
						return false; 
					} else {
						return this.valideProtocol(isHasProtocol);
					}
				}else {
					return this.valideProtocol(isHasProtocol);
				}
			},
			//判断是否注册
			isRegister(reqUrlCode,uniqueId,uniqueType){
				let flag = false;
				for(let i=0;i<this.userArray.length;i++){
					let item = this.userArray[i];
					if(item.reqUrlCode == reqUrlCode && item.uniqueId == uniqueId && item.uniqueType == uniqueType){
						return true;
					}
				}
				return flag;
			},
			async next(){
				let that = this;
				let flag = this.valide(0);
				if(flag){
					let params = {
						useType:this.typeArr[this.typeIndex].id,
						useCode:this.useCode
					}
					let data = await api.getUserInfo(params);
					let obj = data.data
					if(obj.qrCode == '0'){
						util.showModal('未匹配成功');
					}else if(obj.qrCode == '2'){
						util.showModal('已停用');
					}else if(obj.qrCode == '9') {
						util.showModal(obj.qrError);
					}else if(obj.qrCode == '1'){
						
						if(this.isRegister(obj.reqUrlCode,obj.uniqueId,obj.uniqueType)) {
							util.showModal('已经注册');
							return;
						}
						data.userKind = that.userKind;
						data.useType = params.useType;
						data.useCode = params.useCode;
						util.setStorage("userInfo",data);
						util.navigateTo('/pages/register/sure')
					}
				}
			},
			// 判断 查户号/表号 图片是否存在
			// checkImgExists(imgUrl) {
			// 	let that = this;
			//     let ImgObj = new Image();
			//     ImgObj.src = imgUrl;
			//     ImgObj.onload=function(){
			// 		that.typeArr[that.typeIndex].isShowQueryMethod = true;
			//     }
			//     ImgObj.onerror=function(){
			// 		that.typeArr[that.typeIndex].isShowQueryMethod = false;
			//     }
			// }
		}
	}
</script>

<style lang="scss">
	page {
		color: $uni-color-grey;
	}
	.register {
		position: relative;
		padding: $uni-spacing-100+$uni-spacing-70 $uni-spacing-row-xs 0;
		.types {
			display: flex;
			justify-content: space-around;
			padding: $uni-spacing-row-sm 0;
			background-color: $uni-color-white;
			box-shadow: $uni-shadow-light;
			border-radius: $uni-border-radius-base;
			.item {
				text-align: center;
				.iconfont {
					margin-bottom: $uni-spacing-row-sm;
					font-size: $uni-font-size-xl;
				}
				&.active {
					color: $uni-color-blue;
				}
			}
		}
		.inputGroup {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: $uni-spacing-70;
			padding: 0 $uni-spacing-20;
			uni-input {
				flex: 1;
			}
			.iconfont {
				font-size: $uni-font-size-base*2;
				padding-right: 30upx;
			}
			.hint {
				color: $uni-color-grey;
				padding-left: 30upx;
				&:active {
					color: $uni-color-blue;
				}
			}
		}
		.relation {
			margin-top: $uni-spacing-80;
			.title {
				padding: 0 $uni-spacing-20;
			}
			.group-tabs {
				margin-top: $uni-spacing-30;
				padding: 0 $uni-spacing-10;
			}
			
		}
		.next {
			padding: 0 $uni-spacing-20;
			.lable {
				margin-top: $uni-spacing-40;
				display: flex;
				align-items: center;
				text {
					vertical-align: middle;
				}
			}
			button {
				margin-top: $uni-spacing-70;
			}
		}
	}
</style>

